<template>
  <div class="addobs">
    <dnav :data="['检测管理', '添加检测']" />

    <!-- 选择检测任务 -->
    <el-select v-model="ass_id" placeholder="请选择检测任务">
      <el-option
        v-for="v in notwriteass"
        :key="v.ass_id"
        :label="v.aname"
        :value="v.ass_id"
      >
        <span style="float: left">{{ v.aname }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{
          v.to_time
        }}</span>
      </el-option>
    </el-select>
    <el-date-picker
      type="date"
      style="width: 300px"
      placeholder="选择日期"
      v-model="over_time"
      value-format="yyyy-MM-dd"
    ></el-date-picker>
    <el-divider content-position="left">记录检测结果</el-divider>

    <!-- 记录 -->
    <el-card v-if="ass_id && over_time">
      <!-- <el-card> -->
      <!-- 步骤条 -->
      <el-steps :active="active" finish-status="success">
        <el-step
          v-for="v in obsobjlist"
          :key="v.wu_id"
          :title="v.wuname"
        ></el-step>
      </el-steps>
      <el-divider content-position="left"
        >检测{{ obsobjlist.find((v) => v.wu_id == wu_id).wuname }}</el-divider
      >

      <!-- 填写检测记录 -->
      <el-tabs v-model="wu_id" tab-position="left" style="height: 400px">
        <el-tab-pane
          :name="v.wu_id + ''"
          v-for="v in obsform"
          :label="v.wuname"
          :key="v.wu_id"
        >
          <div class="mitw">
            <h4>请填写记录结果</h4>
            <el-input
              style="margin: 10px 0"
              :placeholder="i.miname"
              v-model="i.mires"
              v-for="i in v.children"
              :key="i.mit_id"
            ></el-input>
          </div>
          <el-button
            style="margin-top: 12px"
            @click="next(v.children)"
            type="primary"
            :disabled="active >= 4"
            >{{ active >= 3 ? "完成" : "下一步" }}</el-button
          >
          <el-button v-show="active >= 4" type="success" @click="addw()"
            >添加</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notwriteass: [], //未记录检测任务列表
      ass_id: "", //任务ID
      over_time: "", //完成时间
      active: 0, //进度下标
      tabPosition: "left", //选项卡方向
      obsobjlist: [], //检测对象列表
      wu_id: "1", //生物id
      mitlist: [], //生物列表
      obsform: [], //组合检测表单数据
    };
  },
  methods: {
    getnotass() {
      //获取未完成任务
      let obj = {
        //组合参数
        man_id: JSON.parse(sessionStorage.getItem("userinfo")).man_id,
        asst_id: 1,
      };
      // 拿数据
      this.$api.NotWriteAss(obj).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.notwriteass = res.data.data;
        }
      });
    },
    async getobsobj() {
      //获取检测对象
      return this.$api.Getobsobj().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.obsobjlist = res.data.data;
        }
      });
    },
    async getmit() {
      //获取微生物列表
      return this.$api.Getmit().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.mitlist = res.data.data;
        }
      });
    },
    // 创建表单  [{name:'手',children:[....]}]
    createform() {
      // 一级  对象的名称 wuname 对象的id wu_id 微生物列表 children
      // 二级  微生物名称 miname 微生物id mit_id 微生物测试值 mires
      this.obsobjlist.map((v, k) => {
        let obj = {
          wuname: v.wuname,
          wu_id: v.wu_id,
          children: [],
        };
        this.mitlist.map((i, j) => {
          let obj1 = {
            miname: i.miname,
            mit_id: i.mit_id,
            mires: "",
          };
          obj.children.push(obj1);
        });
        this.obsform.push(obj);
      });
      console.log(this.obsform);
    },
    next(arr) {
      //判断 绑定进度下标

      //判断是否为空
      let nul = arr.some((v) => v.mires == "");
      if (nul) {
        this.$message({
          type: "info",
          message: "请填写完整",
        });
        return;
      }
      this.active++;

      //判断下标
      this.wu_id = this.active + 1 + "";
      if (this.active >= 4) {
        this.active = 4;
        this.wu_id = "4";
      }
      console.log(arr);
    },
    addw() {
      //组合提交参数
      let { man_id } = JSON.parse(sessionStorage.getItem("userinfo"));
      let asst_id = this.assst_id;
      let ass_id = 1;
      let over_time = this.over_time;
      let room_id = this.notwriteass.find((v) => v.ass_id == ass_id).room_id;

      let params = {
        man_id,
        ass_id,
        asst_id,
        over_time,
      };
      // 遍历表单数据
      let data = [];
      this.obsform.map((v, k) => {
        let wu_id = v.wu_id;
        v.children.map((i, j) => {
          let obj = {
            ass_id,
            room_id,
            wu_id,
            mit_id: i.mit_id,
            mires: i.mires,
          };
          data.push(obj);
        });
      });
      data = JSON.stringify(data);
      params.data = data;
      // console.log(params);
      // 发送数据请求
      this.$api.Addobs(params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.obsform = [];
          this.active = 0;
          this.wu_id = "1";
          this.init();
          this.getnotass();
          this.$store.dispatch("getnotass");
        }
      });
    },
    sel() {
      this.obsform = [];
      this.active = 0;
      this.wu_id = "1";
      this.init();
    },
    async init() {
      await this.getobsobj();
      await this.getmit();
      this.createform();
    },
  },
  mounted() {
    // 挂载后调用
    this.getnotass();
    this.init();
  },
};
</script>

<style>
</style>